<template>
	<view class="bg-white flex flex-direction" style="height: 100vh;width: 100%;">
	<view class="flex justify-center align-center" style="padding: 32rpx;position: relative;height: 100rpx;" :style="[{paddingTop: StatusBar + 'px'}]">
		<text class="cuIcon-back" style="font-size: 40rpx;position: absolute;left:2%" @click="back"></text>
		<text>选择知识</text>
	</view>
		<!-- 搜索框 -->
		<navigator class="round bg-gray padding-xs  text-gray  margin-left margin-right margin-bottom-lg"  style="height: 60rpx;">
			<text class="cuIcon-search margin-right margin-left"></text>
			搜索
		</navigator>
		<!-- 垂直导航 -->
		<view class="flex">
			<scroll-view class="VerticalNav nav " scroll-y scroll-with-animation  style="height:calc(100vh - 200upx)">
				<view class="cu-item" :class="index==tabCur?'text-green cur':''" v-for="(item,index) in list" :key="index" @tap="TabSelect"
				 :data-id="index">
					{{item.name}}
				</view>
			</scroll-view>
			<scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:calc(100vh - 200upx)">
				<view class="padding-top padding-lr" v-for="(item,index) in second" :key="index">
					<view class=" bg-white" style="height: 80rpx;border-radius: 20rpx;padding: 20rpx 20rpx;">
						<view>
							<text class="cuIcon-title text-green"></text>{{item.name}}
						</view>
					</view>
					<view class="flex align-center " style="flex-flow: wrap;" >
						<view style="margin: 20rpx 10rpx 10rpx 20rpx;" v-for="(val,i) in item.third" :key="i" @click="classSelect(index,i)">
						    <view class=" round " style="padding: 18rpx" :class="thirdCur==i && secondCur==index?'bg-blue':'bg-grey'">{{val.name}}</view>
						</view>
					</view>	
					
				</view>
			</scroll-view>
		</view>
	</view>	
</template>
<script>
export default {
		data() {
			return {
				list: [{name:'科学经典'},{id:1,name:'化学经典'},{id:2,name:'数学'},{id:3,name:'英语'},{id:4,name:'语文'},{id:5,name:'物理'}],
				second:[{id:0,name:'二级分类',third:[{name:'三级分类'},{name:'三级分类'},{name:'分类'},
				{name:'三级分类'},{name:'三级分类'},{name:'分类'},{name:'分类'}]},
				{id:1,name:'二级分类',third:[{name:'三级分类'},{name:'三级分类'},{name:'分类'}]},
				{id:2,name:'二级分类',third:[{name:'三级分类'},{name:'三级分类'}]},
				{id:3,name:'二级分类',third:[{name:'三级分类'},{name:'三级分类'}]},
				{id:4,name:'二级分类',third:[{name:'三级分类'},{name:'三级分类'},{name:'分类'}]},
				{id:5,name:'二级分类',third:[{name:'三级分类'},{name:'三级分类'},{name:'分类'}]},
				{id:6,name:'二级分类',third:[{name:'三级分类'},{name:'三级分类'},{name:'分类'}]},
				{id:7,name:'二级分类',third:[{name:'三级分类'},{name:'三级分类'},{name:'分类'}]}],
				tabCur: 0,
				secondCur:0,
				thirdCur:0,
			};
		},
		onLoad() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
		},
		onReady() {
			uni.hideLoading()
		},
		methods: {
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			TabSelect(e) {
				// console.log(e)
				this.tabCur = e.currentTarget.dataset.id;
			},
			classSelect(second,third){
				this.secondCur=second;
				this.thirdCur=third
			}
		},
	}
</script>

<style>
	.fixed {
		position: fixed;
		z-index: 99;
	}

	.VerticalNav.nav {
		width: 200upx;
		white-space: initial;
	}

	.VerticalNav.nav .cu-item {
		width: 100%;
		text-align: center;
		background-color: #fff;
		margin: 0;
		border: none;
		height: 50px;
		position: relative;
	}

	.VerticalNav.nav .cu-item.cur {
		background-color: #f1f1f1;
	}

	.VerticalNav.nav .cu-item.cur::after {
		content: "";
		width: 8upx;
		height: 30upx;
		border-radius: 10upx 0 0 10upx;
		position: absolute;
		background-color: currentColor;
		top: 0;
		right: 0upx;
		bottom: 0;
		margin: auto;
	}



	.VerticalMain {
		background-color: #f1f1f1;
		flex: 1;
	}
</style>

